<template>
  <el-card>
    <el-row>
      <el-col :span="20">
        <el-icon>
          <Search />
        </el-icon>
        <span>搜索</span>
      </el-col>
      <el-col :span="4">
        <el-button>重置</el-button>
        <el-button type="primary" @click="request">查询搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="flex flex-v-center">
          <span>账号/用户名 ：</span><el-input v-model="searchParams.keyword" />
        </div>
      </el-col>
    </el-row>
  </el-card>

  <el-card>
    <el-row>
      <el-col :span="23"></el-col>
      <el-col :span="1">
        <el-button type="primary">添加</el-button>
      </el-col>
    </el-row>
  </el-card>

  <el-table border :data="list">
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="角色名称"></el-table-column>
    <el-table-column prop="description" label="描述"></el-table-column>
    <el-table-column prop="adminCount" label="用户数"></el-table-column>
    <el-table-column prop="createTime" label="添加时间">
      <template #default="{ row }">
        {{ formatDate(row.createTime) }}
      </template>
    </el-table-column>
    <el-table-column prop="status" label="是否启用">
      <template #default="{ row }">
        <el-switch
          v-model="row.status"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          link
          type="primary"
          @click="$router.push('/ums/allocMenu?id=' + row.id)"
          >分配菜单</el-button
        >
        <el-button
          link
          type="primary"
          @click="$router.push('/ums/allocResource?id=' + row.id)"
          >分配资源</el-button
        >
        <el-button link type="primary">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="flex page">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </ElConfigProvider>
  </div>
</template>
<script lang="ts" setup>
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { reactive } from "vue";
import { getRoleListApi } from "@/api";
import useTable from "@/hooks/useTable";
import { formatDate } from "@/common";
import { Search } from "@element-plus/icons-vue";

const searchParams = reactive({
  keyword: "",
});

const { list, pageNum, pageSize, total, request } = useTable(
  getRoleListApi,
  searchParams
);
</script>
<style lang="less" scoped>
// Vue3里面修改了 深层修改组件库样式的api
:deep(.el-table__cell) {
  text-align: center;
}
.el-card {
  margin-bottom: 20px;
  font-size: 14px;
}
.page {
  padding: 20px 0;
  justify-content: flex-end;
}
</style>
